<!-- The following from angularui gets stepped on by angularstrap datepicker... -->

<!--
<div class="container">
Example: Angular UI Date Picker bound to scope, with formatting options...<br><br>
<div class="row">
<div class="col-md-1 " ng-model="date2" ui-date></div>
<div class="col-md-1"></div>
<div class="col-md-1" ng-model="date2">
    <p class="alert alert-info"><span class="label label-info">Selected date</span><br>{{date2}}</p>

    <p class="alert alert-info"><span class="label label-info">Formatted date</span><br>{{date2 | date:
        'mediumDate'}}</p>

    <p class="alert alert-info"><span class="label label-info">Selected month</span><br>{{date2.getMonth()}}
    </p>
</div>
<div class="col-md-1"></div>
</div>
</div>
-->

<section id="datepicker">
    <div class="page-header">
        <h1>Datepicker</h1>
    </div>

    <div class="bs-docs-example">

        <form class="form-horizontal well" name="myForm">
            <div class="control-group input-append">
                <div class="row">

                    <div class="col-md-3">
                        <a style="margin-right: 0px; margin-bottom: .5em;" class="btn btn-primary" data-toggle="datepicker"><i
                                class="glyphicon glyphicon-calendar"/></a>
                        <input name="date" style="width: 12em; margin-left: 0px;" class="form-control" type="text" ng-model="datepicker.dateStrap"
                               data-date-format="mm/dd/yyyy" bs-datepicker>
                    </div>

                    <div class="col-md-5">
                        <h4>Model:  {{datepicker.dateStrap}}</h4>
                    </div>

                </div>



            </div>
        </form>
    </div>

    <div class="alert alert-info">
        <strong>Heads up!</strong>
        You can use a custom button as a toggle with <code>data-toggle="datepicker"</code> on a sibling element.
    </div>
</section>


           <!-- Removing due to unresolved styling issues
<section id="timepicker">
    <div class="page-header">
        <h1>Timepicker</h1>
    </div>

    <p>Supports AngularJS validation out of the box.</p>

    <div class="bs-docs-example">
        <pre style="min-height: 60px;">timepicker: {{timepicker | json}}
        <form class="form-horizontal well" name="myForm">
            <div class="control-group">

                <a name="time" style="width: 7em;" class="btn btn-primary form-control" type="text" ng-model="timepicker.timeStrap" bs-timepicker>
                    {{timepicker.timeStrap}}
                </a>
            </div>
        </form>
    </div>

</section>
           -->